<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主题切换</title>
    <link rel="stylesheet" href="./theme.css">
    <style>
        .main {
            width: 100%;
            height: 100vh;
            background: linear-gradient(var(--bg-color1), var(--bg-color2));
            color: var(--btn-color);
        }

        .text{
            color: var(--text-color);
        }
    </style>
</head>
<body>

<div class="main">
    <button class="btn">切换主题</button>
    <div class="text"></div>
</div>

<script>
    const btn = document.querySelector('.btn');
    const text = document.querySelector('.text');
    const os = matchMedia("(prefers-color-scheme: light)")
    os.addEventListener("change", function () {
        // 当系统主题发生变化时，就会触发change事件
        console.log('系统主题',os.matches)
        if (os.matches) {
            document.documentElement.setAttribute('data-theme', 'light');
            text.innerText = '亮色主题';
        } else {
            document.documentElement.setAttribute('data-theme', 'dark');
            text.innerText = '暗色主题';
        }
    })
    btn.addEventListener('click', function () {
        const theme = document.documentElement.getAttribute("data-theme")
        // 当前系统是否是亮色主题，不是返回false

        console.log('系统主题',os.matches)
        theme === 'dark' ? document.documentElement.setAttribute('data-theme', 'light') : document.documentElement.setAttribute('data-theme', 'dark');
        text.innerText = theme === 'dark' ? '暗色主题' : '亮色主题';
    })


</script>
</body>
</html>